import React, { Component, lazy, Suspense } from 'react';
import { Switch, Route, Redirect, NavLink, Link } from 'react-router-dom'
import Tabbar from '../components/Tabbar'

var Home = lazy(() => import('./Index/Home'))
var BookCity = lazy(() => import('./Index/BookCity'))
var BookShelf = lazy(() => import('./Index/BookShelf'))
var Mine = lazy(() => import('./Index/Mine'))
var NotFound = lazy(() => import('./NotFound'))
class Index extends Component {
    render() {
        return (
            <div className='index'>
                <Suspense fallback={<div className='loading'>loading...</div>}>
                    <Switch >
                        <Route exact path="/index/home" component={Home} />
                        <Route exact path="/index/bookcity" component={BookCity} />
                        <Route exact path="/index/bookshelf" component={BookShelf} />
                        <Route exact path="/index/mine" component={Mine} />
                        <Redirect exact from='/index' to="/index/home" />
                        <Route path="*" component={NotFound} />
                    </Switch>
                </Suspense>
                <Tabbar />
            </div>
        );
    }
}

export default Index;